<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>No JS Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            /* CSS styles */
        /* Example by Antoni Putra at https://codepen.io/antoniputra/pen/BzyWmb */
        .menu {
            display: block;
            z-index: 999999;
        }
        .menu li {
            display: inline-block;
            position: relative;
        }
        .menu li.dropdown:hover > .submenu {
            display: block;
        }
        .menu li a {
            display: block;
            padding: 12px 8px;
            background: #ccc;
        }
        .menu li.dropdown > a::after {
            content: "\e259";
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            margin-left: 8px;
            font-size: 10px;
        }
        .menu li a::before {
            content: "\e179";
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            margin-right: 8px;
        }
        .menu li a:hover {
            background: grey;
        }

        .menu .submenu {
            display: none;
        }
        .submenu {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: 0px;
            list-style-type: none;
            display: block;
            width: 200px;
            z-index: 9;
        }
        .submenu li {
            display: block;
        }
        .submenu li a {
            display: block;
            background: #999;
            color: #fff;
            padding: 8px 6px;
            margin-bottom: 1px;
        }
        .menu .submenu > li.dropdown:hover > .submenu {
            display: block;
        }

        .menu .submenu .submenu {
            position: absolute;
            left: 200px;
            top: 0px;
        }

        .submenu li.dropdown > a:after {
            content: "\e258";
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            margin-left: 8px;
            font-size: 10px;
        }
        </style>

    </head>
    <body>
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <ul class="menu">
            <li><a href="">Home</a></li>
            <li class="dropdown">
                <a href="">Service</a>
                <ul class="submenu">
                    <li>
                        <a href="">satu</a>
                    </li>      
                    <li class="dropdown">
                        <a href="">dua</a>
                        <ul class="submenu">
                            <li class="dropdown">
                                <a href="">jeruh dua</a>
                                <ul class="submenu">
                                    <li>
                                        <a href="">mentok satu</a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="">mentok dua</a>
                                        <ul class="submenu">
                                            <li>
                                                <a href="">njedok prend satu</a>
                                            </li>      
                                            <li>
                                                <a href="">njedok prend dua</a>
                                            </li>
                                            <li>
                                                <a href="">njedok prend tiga</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="">mentok satu</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="">jeruh satu</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">Other</a></li>
        </ul>
    </body>
</html>
